<template>
	<view class="CancelCommonApplication">
		<view class="CancelCommonApplication-header">
			<view class="CancelCommonApplication-header-info">
				<view>
					订单编号
					<text>{{ currentParams.orderNo || currentParams.seekNo }}</text>
				</view>
				<view>
					申请时间
					<text>{{ currentParams.uploadTime || currentParams.applyTime }}</text>
				</view>
			</view>

			<view class="CancelCommonApplication-header-main">
				<DistributionMaterial isPreview :skelettSize="1" :isSkelett="isSkelett" :isFooter="false" :list="materailList" />
			</view>

			<view class="CancelCommonApplication-header-footer">
				<view class="CancelCommonApplication-header-footer-left">{{ isMaterial ? '上传数量' : '佣金模式' }}</view>
				<view class="CancelCommonApplication-header-footer-right">
					<template v-if="isMaterial">
						图片
						<view>
							<text>{{ currentParams.imgNum }}</text>
						</view>
						张， 视频
						<view>
							<text>{{ currentParams.videoNum }}</text>
						</view>
						个
					</template>
					<template v-else>
						<template v-if="[1, 2].includes(currentParams.commissionType)">
							拍摄费
							<view>
								￥
								<text>{{ currentParams.finalPriceYuan }}</text>
							</view>
						</template>
						<template v-if="[2].includes(currentParams.commissionType)">，</template>
						<template v-if="[2, 3].includes(currentParams.commissionType)">
							CPS
							<view>
								￥
								<text>{{ currentParams.commissionYuan }}</text>
							</view>
							/单
						</template>
					</template>
				</view>
			</view>
		</view>

		<view class="CancelCommonApplication-reason">
			<view class="CancelCommonApplication-reason-left">
				取消原因
				<text>*</text>
			</view>
			<view class="CancelCommonApplication-reason-right" @click.prevent="changeIsPopup">
				<text :class="{ active: requestParams.cancelLabel }">{{ requestParams.cancelLabel || '请选择取消原因' }}</text>
				<image src="@/static/icon/icon_i_list_right.png" />
			</view>
		</view>

		<view class="CancelCommonApplication-illustrate">
			<textarea v-model="requestParams.reason" placeholder="请详细补充说明情况" placeholder-style="placeholder" :maxlength="50" />
			<text>{{ reasonLength }}/50</text>
		</view>

		<view class="CancelCommonApplication-footer">
			<button
				:loading="isLoading"
				:disabled="isDisabled || isLoading"
				:class="{
					active: isDisabled || isLoading
				}"
				@click="submit"
			>
				提交
			</button>
		</view>

		<PopupCommissionModel
			v-model="isPopup"
			:popupHeight="500"
			:list="popupCancelTypeList"
			:activeValue="popupActiveParams"
			title="请选择取消原因"
			@changeBottomActionSheet="changeRequestParamsCancelLabel"
		/>
	</view>
</template>

<script>
import { formatCommissionsModel } from '@/utils/common';

import { getMaterailDetail, getMaterailStatusList } from '@/api/material';
import { tdSeekApplyDetail, cancelExploreStore, cancelExploreMaterial } from '@/api/order';

import DistributionMaterial from '@/components/distributionMaterial';
import PopupCommissionModel from '@/components/popupCommissionModel';

const exploreStoreTypeList = [
	'计划有变，没有时间探店',
	'行程变更，需要重新申请',
	'佣金不够高',
	'探店位置距离太远',
	'套餐折扣小',
	'其他原因'
];

const materialTypeList = ['对素材不满意，重新上传', '上传素材收益过低', '担心隐私泄露', '有其他更好上传素材渠道', '其他原因'];

export default {
	name: 'CancelCommonApplication',

	data() {
		return {
			isSkelett: true,
			isPopup: false,

			isMaterial: false,
			requestParams: {
				reason: '',

				cancelIndex: '',
				cancelLabel: ''
			},

			isLoading: false,
			currentParams: {}
		};
	},

	onLoad({ isMaterial = 0, ...otherParams }) {
		this.isMaterial = !!(isMaterial * 1);

		this.getCurrentPageValue(otherParams);
	},

	computed: {
		popupCancelTypeList() {
			const { isMaterial } = this;

			return (isMaterial ? materialTypeList : exploreStoreTypeList).map((item, index) => {
				return {
					label: item,
					value: index
				};
			});
		},

		popupActiveParams() {
			const {
				requestParams: { cancelIndex, cancelLabel }
			} = this;

			return [
				cancelLabel && {
					value: cancelIndex,
					label: cancelLabel
				}
			].filter(Boolean);
		},

		materailList() {
			const {
				isMaterial,
				currentParams: { faceImg, productName, salePrice, originPrice, productSalePrice, productOriginPrice, commission }
			} = this;

			return [
				Object.assign(
					{
						faceImg,
						productTitle: productName,

						salePrice: salePrice || productSalePrice,
						originPrice: originPrice || productOriginPrice
					},
					isMaterial &&
						commission && {
							commissionsList: formatCommissionsModel(commission)
						}
				)
			];
		},

		isDisabled() {
			const {
				requestParams: { cancelLabel }
			} = this;

			return !cancelLabel;
		},

		reasonLength() {
			const {
				requestParams: { reason }
			} = this;

			return reason.length;
		}
	},

	methods: {
		changeIsPopup() {
			this.isPopup = true;
		},

		submit() {
			const {
				isMaterial,
				isLoading,
				currentParams: { id },
				requestParams: { reason, cancelLabel }
			} = this;

			if (isLoading) {
				return;
			}

			const params = {
				id,
				cancelReason: cancelLabel,
				additionReason: reason.replace(/\s/g, '')
			};

			this.isLoading = true;
			const requestApi = isMaterial ? cancelExploreMaterial : cancelExploreStore;

			requestApi(params)
				.then((responseParams) => {
					const { data, message } = responseParams || {};
					const title = data ? '操作成功~' : message;

					uni.showToast({
						title,
						mask: true,
						icon: 'none',
						success: () => {
							if (data) {
								setTimeout((e) => {	
									/* eslint-disable */
									const routes = getCurrentPages();
									const parentParams = routes[routes.length - 2];
									console.log(parentParams)
									if(parentParams?.$vm?.initOrder){
										parentParams?.$vm?.initOrder(true);
									}
									/* eslint enable */

									uni.navigateBack();
								}, 1500);
							}
						}
					});
				})
				.finally((e) => {
					this.isLoading = false;
				});
		},

		changeRequestParamsCancelLabel(params) {
			const { requestParams } = this;
			const [{ label, value }] = params;

			this.requestParams = {
				...requestParams,

				cancelIndex: value,
				cancelLabel: label
			};
		},

		async getCurrentPageValue(params) {
			const { isMaterial } = this;

			const repuestApi = isMaterial ? [getMaterailDetail(params), getMaterailStatusList(params)] : [tdSeekApplyDetail(params)];
			const [responseParams, resourcesNumberParams] = await Promise.all(repuestApi);

			console.log('🚀 ~ file: CancelCommonApplication.vue ~ line 188 ~ getCurrentPageValue ~ responseParams', responseParams);

			let formatData = responseParams.data || {};
			if (resourcesNumberParams) {
				const {
					data: { imgNum, videoNum }
				} = resourcesNumberParams;
				formatData = {
					...formatData,
					imgNum,
					videoNum
				};
			}

			this.currentParams = formatData;
			this.isSkelett = false;

			console.log('🚀 ~ file: CancelCommonApplication.vue ~ line 160 ~ getCurrentPageValue ~ this.currentParams', this.currentParams);
		}
	},

	components: {
		DistributionMaterial,
		PopupCommissionModel
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.CancelCommonApplication {
	padding: 0 20rpx;
	@include Db_iosBottomDistance(120rpx);

	&-header {
		overflow: hidden;
		padding: 0 20rpx 20rpx;

		&-info {
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);

			> view {
				display: flex;
				align-items: center;
				margin-top: 32rpx;
				color: #333;
				font-size: 28rpx;

				text {
					padding-left: 40rpx;
					color: #1f1f1f;
					font-weight: 500;
				}
			}
		}

		&-main {
			padding-top: 12rpx;
		}

		&-footer {
			margin-top: -12rpx;
			background: #f6f6f6;
			border-radius: 12rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			color: #333;
			font-size: 24rpx;

			&-right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				view {
					color: #f55f4e;
					font-weight: bold;
					margin: 0 4rpx;

					text {
						font-size: 40rpx;
					}
				}
			}
		}
	}

	&-reason {
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		color: #333;
		font-size: 28rpx;

		&-left {
			text {
				color: #f55f4e;
			}
		}

		&-right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			text {
				color: #999;
				margin-right: 8rpx;

				&.active {
					color: #333;
                    font-weight: 500;
				}
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	&-illustrate {
		position: relative;
		textarea {
			width: 100%;
			color: #333;
			font-size: 28rpx;
			padding: 20rpx;
			height: 240rpx;
			line-height: 40rpx;
            font-weight: 500;
		}

		text {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;

			color: #999;
			font-size: 24rpx;
		}

		.placeholder {
			color: #999;
			font-size: 28rpx;
		}
	}

	> view {
		border-radius: 24rpx;
		background: #fff;
		margin-top: 20rpx;
	}

	&-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 0;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 51, 51, 0.14);

		padding: 16rpx 28rpx;
		@include Db_iosBottomDistance(16rpx);

		button {
			@include Db_commonButton(88rpx, 24rpx);
		}
	}
}
</style>
